<template>
	<cl-page>
		<view class="edit-page">
			<cl-form ref="form" :model="form" :rules="rules">
				<cl-form-item prop="nickName" label="昵称">
					<cl-input v-model="form.nickName" placeholder="请输入昵称" />
				</cl-form-item>
				<cl-form-item prop="phone" label="手机号">
					<cl-input v-model="form.phone" placeholder="请输入手机号" disabled />
				</cl-form-item>
			</cl-form>

			<view class="submit-btn">
				<cl-button type="primary" size="large" @tap="submit">保存</cl-button>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useCool } from "/@/cool";

const { router } = useCool();

const form = reactive({
	nickName: "用户昵称",
	phone: "138****8000",
});

const rules = {
	nickName: { required: true, message: "昵称不能为空" },
};

function submit() {
	uni.showToast({ title: "保存成功", icon: "success" });
	setTimeout(() => {
		router.back();
	}, 1000);
}
</script>

<style lang="scss" scoped>
.edit-page {
	padding: 32rpx;
}

.submit-btn {
	margin-top: 64rpx;
}
</style>
